//根地址
axios.defaults.baseURL = 'http://ajax-api.itheima.net'

const topList = document.querySelector('.top')

const renderList = async function () {
  let arr = await axios.get('/api/category/top')
  const { data } = arr
  // console.log(data);

  const newArr = data.data.map((item) => {
    console.log(item)
    return axios.get('/api/category/sub?id=' + item.id)
  })

  console.log(newArr)
  const a = await Promise.all(newArr)

  const html = a
    .map(({ data: item }) => {
      return `
        <li>
            <a href="javascript:;">${item.data.name}</a>
            <img
              src="${item.data.picture}"
              alt="" />
            <ul class="sub">
            ${item.data.children
              .map((item) => {
                return `
                    <li>
                    <a href="javascript:;">
                      <span>${item.name}</span>
                      <img src="${item.picture}"
                        alt="" />
                    </a>
                    </li>
                `
              })
              .join('')}
              </ul>
        </li>
      `
    })
    .join('')

  topList.innerHTML = html
}

renderList()
